<template>
  <v-app app>
    <!-- 顶部导航栏 -->
    <TopBar></TopBar>

    <v-main class="grey lighten-3">
      <v-container>
        <v-row>
          <!-- 侧边栏 -->
          <v-col cols="12" md="3">
            <Nav></Nav>
          </v-col>
          <!-- 主要内容区域 -->
          <v-col cols="12" md="9">
            <v-sheet min-height="80vh" rounded="lg">
              <!-- 路由视图，用于渲染当前路由对应的组件 -->
              <router-view :key="$route.path"></router-view>
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>

    <!-- 底部栏 -->
    <Footer></Footer>
  </v-app>
</template>

<script>
// 导入顶部导航栏组件
import TopBar from '../components/TopBar'
// 导入底部栏组件
import Footer from '../components/Footer'
// 导入侧边栏组件
import Nav from '../components/Nav'

export default {
  // 注册组件
  components: { TopBar, Footer, Nav }
}
</script>
